<template>
  <div >
    <Dropdown  trigger="click" style="position: absolute;right:30px;z-index:1;">
      <img src="/static/images/jfzsbg.jpg" class="zss_headerimg">
      <DropdownMenu slot="list">
          <DropdownItem>账号设置</DropdownItem>
          <DropdownItem divided>退出</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <div class="layout" >
      <Layout>
        <Header :style="{position: 'fixed', width: '100%'}">
          <Menu mode="horizontal" on-select="menuRedirect" theme="dark" active-name="">
            <div class="layout-logo"></div>
            <div class="layout-nav">
              <MenuItem name="menuto"  v-for="(topmenu,i) in topmenus" :key="i">
                  <Icon :type="topmenu.zsstype"></Icon>
                  {{topmenu.text}}
              </MenuItem>


            </div>
          </Menu>
        </Header>
        <Content :style="{margin: '88px auto 0', minHeight: '500px',width:'1170px'}">
          <p style="font-size:18px;padding-bottom:10px">我拥有的项目</p>
          <Row :gutter="15">
              <Col span="6">
                <Card style="width:100%">
                  <p slot="title" class="zss_title">
                      <Icon type="log-in" color="#00F7FF"></Icon>
                      待办
                  </p>
                  <ul>
                      <li v-for="item in dbList">
                          <a target="_blank">{{ item.name }}</a>
                      </li>
                  </ul>
                </Card>
              </Col>
              <Col span="6">
                <Card style="width:100%">
                  <p slot="title">
                      <Icon type="log-out" color="#00F7FF"></Icon>
                      已办
                  </p>
                  <ul>
                      <li v-for="item in ybList">
                          <a target="_blank">{{ item.name }}</a>
                      </li>
                  </ul>
                </Card>
              </Col>
          </Row>

        </Content>
        <Footer class="layout-footer-center">2018 &copy; Immense</Footer>
      </Layout>
    </div>

  </div>
</template>
<script>

export default {
  data (){
    return {
      topmenus:[
        {
          text: '任务',
          zsstype:'ios-navigate'
        },
        {
          text: '文件',
          to: 'manager/test'
        },
        {
          text: '笔记',
          zsstype:'compose'
        },
        {
          text: '我的',
          zsstype:'person'
        }
      ],
      dbList: [
        {
          name: '待办事项一'
        },
        {
          name: '待办事项二'
        },
        {
          name: '待办事项三'
        }
      ],
      ybList:[
        {
          name: '已办事项一'
        },
        {
          name: '已办事项二'
        },
        {
          name: '已办事项三'
        }
      ]

    }
  },
  methods: {
    menuRedirect(name) {
      this.$router.push({
        path: name
      })
    }
  }
}
</script>

<style scoped>
.layout{
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo{
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 20px;
  left: 20px;
}
.layout-nav{
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
    border-top:1px solid #DEDEDE;
}
.layout-logo{background: url(/static/images/immenselogo.png) no-repeat;background-size: contain;}
.ivu-card:hover{
      box-shadow: 0 10px 20px rgba(152, 152, 152, 0.5);
      transform: translateY(-5px);
      transition: all 0.3s;
      cursor: pointer;
}
p{font-weight: 0!important}
a{color: white}
.ivu-card-bordered{
  background: url(/static/images/xbj.jpg) no-repeat 0 -120px;
  background-size: cover;
  border:0;
}
.zss_headerimg{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top:10px;
  margin-left: 20px;
  cursor: pointer;
}


</style>
